<template>
  <div class="list" ref="wrapperlistcity">
    <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list ">
          <div class="button-wrapper">
            <!--<div class="button">{{city}}</div>-->
            <div class="button">
              <!--{{this.$store.state.city}}-->
              {{this.currentCity}}

            </div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list ">
          <div class="button-wrapper"
               v-for="(item,index) of hot"
               :key="item.id"

          >
            <div class="button" @click="handleCityClick($event,item.name)">{{item.name}}</div>
          </div>
        </div>
      </div>
      <!--<div class="item border-bottom">北京<p class="add">北京北京</p></div>-->
      <div class="area"  v-for="(items, key, index) in cities" :key="key"
        :ref="key"
      >
        <div class="title border-topbottom">{{key}}</div>
        <div class="item-list " v-for="(item,inde) in items" :key="item.id"
             @click="handleCityClick($event,item.name)"
        >
            <div class="item border-bottom">{{item.name}}</div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CityList',
  props: {
    hot: Array,
    cities: Object,
    city:String,
    letter: Object
  },
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  },
  methods: {
    handleCityClick (e,city) {
      // alert(city);
      // alert(e);
      // console.log('通过vuex改变city-调用 actions');
      // 通过action,间接调用mutations..actions中的 ctx=this.$store实例
      // this.$store.dispatch('changeCity_a',city)
      //  组件中直接调用mutations
      // this.$store.commit('changeCity',city);
      //  使用辅助函数导入mutations。。注意应该用苹果调试，而不是响应式进行调试
      this.changeCity(city);
      //改变城市之后跳转页面。。页面之间的联动用路由
      this.$router.push('/');
    },
    ...mapMutations(['changeCity'])
  },
  watch: {
    // 监听letter的变化
    letter (newsletter,oldsletter) {
      // console.log(oldsletter)
      // console.log(newsletter)
      this.letter=newsletter;
      if (newsletter) {
        //  获取原生dom元素..因为我们是循环输出的ref...他是一个数组，因此我们使用索引0
        // console.log(this.$refs[this.letter.key])
        const element = this.$refs[this.letter.key][0]
        // console.log(element)
        //  这是Bscroll对象。。这是他的方法，用来滚动到某个具体的元素
        this.scroll.scrollToElement(element)
      }
    }
  },
  mounted () {
    //  这里接收的是dom元素
    // document.addEventListener('touchmove', this._preventDefault, { passive: false });
    this.scroll = new Bscroll(this.$refs.wrapperlistcity,{ mouseWheel: true, click: true, tap: true })
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .list
    /*display flex*/
    overflow:hidden
    width :100%
    position:absolute
    top :1.58rem
    left 0
    right:0
    buttom:0
    //  还是需要一个高度，要不然搞不动
    height:85%
    /*padding-bottom :60%*/
    /*background red*/
    .title
      box-sizing:border-box
      width :100%
      font-size :.24rem
      background : #f4f2f2
      padding :.2rem
    .border-topbottom
      /*http://www.runoob.com/cssref/sel-before.html  插入内容的样式*/
      &:before
        border-color: #ccc
      &:after
        border-color: #ccc
    .button-list
      /* 此处是设置BFC，因为父元素没有高度，所以要触发BFC  */
      overflow:hidden
      padding :.2rem .6rem .2rem .2rem
      .button-wrapper
        box-sizing:border-box
        float:left
        width :33.3%
        .button
          margin :.1rem .1rem
          padding:.1rem .1rem
          border:.02rem solid #ccc
          text-align :center
    .item-list
      .item
        box-sizing:border-box
        line-height :.76rem
        padding-left: .3rem
        /*text-align :center*/
    .border-bottom
      &:before
        border-color: #ccc
    .add
      &:before
        content :'xxx'
      &:after
        content :'xxx--'
  /*.border-topbottom*/
    /*&:before*/
      /*border-color: #ccc*/
    /*&:after*/
      /*border-color: #ccc*/
  /*.border-bottom*/
    /*&:before*/
      /*border-color: #ccc*/
  /*.list*/
    /*overflow: hidden*/
    /*position: absolute*/
    /*top: 1.58rem*/
    /*left: 0*/
    /*right: 0*/
    /*bottom: 0*/
    /*.title*/
      /*line-height: .54rem*/
      /*background: #eee*/
      /*padding-left: .2rem*/
      /*color: #666*/
      /*font-size: .26rem*/
    /*.button-list*/
      /*overflow: hidden*/
      /*padding: .1rem .6rem .1rem .1rem*/
      /*.button-wrapper*/
        /*float: left*/
        /*width: 33.33%*/
        /*.button*/
          /*margin: .1rem*/
          /*padding: .1rem 0*/
          /*text-align: center*/
          /*border: .02rem solid #ccc*/
          /*border-radius: .06rem*/
    /*.item-list*/
      /*.item*/
        /*line-height: .76rem*/
        /*padding-left: .2rem*/
</style>
